<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流(懒加载)</title>
	</head>
	<body>
		<script type="text/javascript">
			// addEventListener    /æd  ɪˈvent  lɪsənər/
			// scroll  /skroʊl/
		
			var ul;
			var heightList=[];
			var num = 1;
			var bodyWidth;
			var img;
			const MAX = 35;
			const COL_NUM = 5;
			const MARGIN_LEFT = 10;
			init();
			
			
			function init(){
				bodyWidth = document.body.clientWidth;
				ul = document.createElement("ul");
				Object.assign(ul.style, {
					listStyle: "none",
					width: "100%",
					margin: 0,
					padding: 0
				});
				
				for(var i=0; i<COL_NUM; i++){
					var li = document.createElement("li");
					Object.assign(li.style, {
						margin: 0,
						marginLeft: i == 0 ? 0 : MARGIN_LEFT + "px",
						padding: 0,
						width: (document.body.clientWidth - MARGIN_LEFT * (COL_NUM-1)) / COL_NUM + "px",
						float: "left",
						fontSize: 0,
					});
					ul.appendChild(li);
					heightList.push(0);
				}
				
				document.body.appendChild(ul);
				resizeHandler();
				window.addEventListener("resize",resizeHandler);
				window.addEventListener("scroll", scrollHandler);
				
				loadIamge("./img/cat" + num + ".jpeg");
			}
			
			//重新调整图片宽度(防止滚动条出现改变布局)
			function resizeHandler(){
				bodyWidth = document.body.clientWidth;
				for(var i=0; i<ul.children.length; i++){
					var width = (document.body.clientWidth - MARGIN_LEFT * (COL_NUM-1)) / COL_NUM + "px";
					ul.children[i].style.width = width;
					
					for(var j=0; j<ul.children[i].children.length; j++){
						ul.children[i].children[j].style.width = width;
					}
				}
			}
			
			
			//随机颜色
			function randomColor(){
				return "rgba(" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) +")";
			}
			
			//预加载
			function loadIamge(src){
				img = new Image();
				img.addEventListener("load", loadHandler);
				img.src = src;
			}
			
			function loadHandler(){
				var min = Math.min.apply(null, heightList);
				var index = heightList.indexOf(min);
				this.style.marginBottom = MARGIN_LEFT + "px";
				this.style.width = (document.body.clientWidth - MARGIN_LEFT * (COL_NUM-1)) / COL_NUM + "px";
				ul.children[index].appendChild(this);
				heightList[index] += this.height + MARGIN_LEFT;
				if(document.body.clientWidth != bodyWidth){
					resizeHandler();
				}
				
				//网页正文全文高： document.body.scrollHeight;
				//网页可见区域高： document.documentElement.clientHeight;
				if(document.body.scrollHeight > document.documentElement.clientHeight*3){
					return;
				}
			
				nextLoadImg();
				
			}
			
			function scrollHandler(){
				
				// 网页正文全文高： document.body.scrollHeight;
				// 网页被卷去的高： document.documentElement.scrollTop;
				// 网页可见区域高： document.documentElement.clientHeight;
				
				var height = document.body.scrollHeight - document.documentElement.scrollTop;
				if(height < document.documentElement.clientHeight*2){
					nextLoadImg();
				}
			}
			
			function nextLoadImg(){
				num++;
				if(num > MAX){
					num=1;
				};
				loadIamge("./img/cat" + num + ".jpeg");
			}
		</script>
	</body>
</html>
